{% extends 'registrar/base.html' %}
{% load staticfiles %}
{% block content %}
        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Enrollment
                    <small>The classes which you are a student of</small>
                </h1>
                <ol class="breadcrumb">
                    <li class="active">
                        <i class="fa fa-bookmark"></i> Enrollment
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->

        {% if courses.count == 0 %}

        <div class="jumbotron">
            <h1>Become a Student!</h1>
            <p>Learn, grow and become a better person. Enroll in a class and start today!</p>
            <p><a href="/courses"
                 class="btn btn-primary btn-lg"
                  role="button">Find Courses »</a>
            </p>
        </div>

        {% else %}

        <!-- Course Rows -->
        <div class="row">
            <div class="col-lg-12 text-center">
                <div class="panel panel-default">
                    <div class="panel-body">
                      <div class="table-responsive">
                          <div id="ajax_table_placeholder"
                             name="ajax_table_placeholder">
                             {% include 'registrar/enrollment/table.html' %}
                          </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.Course Rows -->

        {% endif %}
</div>

<!-- Modal -->
<div id="ajax_modal_placeholder"
   name="ajax_modal_placeholder"></div>
<!-- end modal -->

<script>
    function ajax_refresh_enrollments_table()
    {
        $.ajax( 'enrollment_table', {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            type: 'post',
               success: function(result) {
               // success code execution here
               $('#ajax_table_placeholder').html(result); // Update UI.
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }
    
    function ajax_continue_course(course_id)
    {
        var url = 'enroll';
    
        $.ajax( url, {
           data: {
               'course_id' : course_id,
               'csrfmiddlewaretoken': '{{ csrf_token }}',
           },
           type: 'post',
           success: function(result) {
               // success code execution here
               if (result.status == 'success')
               {
                    window.location = 'course/' + course_id + '/announcement';
               }
           },
           error: function(xhr,status,error) {
               // error code here
           },
           complete: function(xhr,status) {
               // completion code here
           }
        });
    }

    function ajax_disenroll_modal(course_id)
    {
        $('#del_' + course_id + '_btn').prop("disabled", true); // Lock button
        $.ajax( 'disenroll_modal', {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'course_id': course_id,
            },
            type: 'post',
            success: function(result) {
               // success code execution here
               $('#ajax_modal_placeholder').html(result); // Update UI.
               $('#disenroll_modal').modal();             // Unhide view.
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }
</script>
{% endblock content %}